<template>
<div class="container">
    <div class="one">
        <!--图片轮播图-->
        <!-- <div class="picSwiper">
          <img src="../assets/logo.png" alt />
        </div> -->
        <!--登录表单-->
        <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
            <span class="tool-bar">
                <!-- 主题切换 -->
                <theme-picker style="float:right;" class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker>
                <!-- 语言切换 -->
                <!-- <lang-selector class="lang-selector"></lang-selector>    -->
            </span>
            <h2 class="web-title" style="padding-left:22px;">微众平台业务中台管理系统</h2>
            <el-form-item prop="account">
                <el-input type="text" class="login-input" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" class="login-input" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-col :span="12">
                    <el-form-item prop="captcha">
                        <el-input type="test" class="login-input" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码, 单击图片刷新" style="width: 100%;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="1">&nbsp;</el-col>
                <el-col :span="11">
                    <el-form-item>
                        <img style="width: 100%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:48%;" @click.native.prevent="reset">重 置</el-button>
                <el-button type="primary" style="width:48%;" @click.native.prevent="login" v-loading.fullscreen="loading">登 录</el-button>
            </el-form-item>
            <!-- 跳转管理员登录 -->
            <div class="login-switchover-wrap">
                <div class="switchover">
                    <router-link to='/Login'>
                        运营账号登录
                    </router-link>
                </div>
                <div class="switchover">
                    <router-link to='/MerchantsSettled'>
                        商家入驻
                    </router-link>
                </div>
            </div>
        </el-form>
    </div>
</div>
</template>

<script>
import {
    mapState
} from "vuex";
import Cookies from "js-cookie";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
//导入通用的消息提示方法。
import * as messageUtil from "@/assets/js/messageUtil.js";

export default {
    name: "Login",
    components: {
        ThemePicker,
        LangSelector
    },
    data() {
        return {
            loading: false,
            loginForm: {
                account: "",
                password: "",
                captcha: "",
                src: ""
            },
            fieldRules: {
                account: [{
                    required: true,
                    message: "请输入账号",
                    trigger: "blur"
                }],
                password: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur"
                }]
            },
            checked: true
        };
    },
    methods: {
        // 跳转到管理员登陆
        goLogin() {
            console.log('do');
            this.$router.push({
                path: '/login'
            })
        },

        // 获取token
        getToken() {
            this.utils.request.getVtoken({}, this.getVtokenResult);
        },

        getVtokenResult(data) {
            localStorage.setItem("vtoken", data.data);
            this.loginForm.src =
                this.utils.host +
                "jic-manager/sysLogin/getLoginCode?vtoken=" +
                data.data;
        },
        login() {
            var this_ = this;
            var queryParam = {
                account: this.loginForm.account,
                password: this.loginForm.password,
                verifyCode: this.loginForm.captcha
            };

            if (this.utils.isNull(this.loginForm.account)) {
                return;
            }

            if (this.utils.isNull(this.loginForm.password)) {
                return;
            }

            if (this.utils.isNull(this.loginForm.captcha)) {
                return;
            }

            this.loading = true;

            queryParam.vtoken = localStorage.getItem("vtoken");

            //登录加载图
            const loading = this.$loading({
                lock: true,
                text: "小的正在努力加载中",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.8)"
            });

            this.utils.request.login(queryParam, function (response) {
                this_.loading = false;

                var message = response.msg;
                var code = response.code;

                if (code == "0000") {
                    var data = response.data;

                    localStorage.setItem("token", data.token);
                    localStorage.setItem("id", data.id);
                    localStorage.setItem("isLogin", "true");
                    localStorage.setItem("user", JSON.stringify(data.chatUser));
                    localStorage.setItem("userId", data.chatUser.userId);
                    localStorage.setItem("userName", data.chatUser.username);

                    localStorage.setItem("portraitUri", data.chatUser.portraitUri);

                    //TODO 写死dept类型
                    localStorage.setItem("deptType", 1);

                    Cookies.set("token", data.token); // 放置token到Cookie
                    sessionStorage.setItem("user", JSON.stringify(data.chatUser)); // 保存用户到本地会话

                    this_.utils.request.findRoleMenuTree({}, res => {
                        loading.close();
                        var code = res.code;
                        if (code == "0000") {
                            if (res.data == null || res.data.length == 0) {
                                //判断是否有菜单权限
                                localStorage.setItem("token", "");
                                this_.$alert(
                                    "当前【" +
                                    queryParam.account +
                                    "】账号无菜单权限，请联系管理员！",
                                    "提示", {
                                        confirmButtonText: "好的",
                                        callback: action => {}
                                    }
                                );
                            } else {
                                this_.$store.commit("menuRouteLoaded", false); // 要求重新加载导航菜单
                                this_.$router.push("/"); // 登录成功，跳转到主页
                            }
                        }
                    });
                } else {
                    loading.close();
                    messageUtil.showMessage(this_, "error", message);
                }
            });
        },
        refreshCaptcha: function () {
            this.loginForm.src =
                this.utils.host +
                "jic-manager/sysLogin/getLoginCode?vtoken=" +
                localStorage.getItem("vtoken") +
                "&data=" +
                new Date().getTime();
        },
        reset() {
            this.$refs.loginForm.resetFields();
        },
        // 切换主题
        onThemeChange: function (themeColor) {
            this.$store.commit("setThemeColor", themeColor);
        },
        keyupEnter() {
            document.onkeydown = e => {
                let body = document.getElementsByTagName("body")[0];
                if (e.keyCode === 13) {
                    this.login();
                }
            };
        }
    },
    mounted() {
        this.getToken();
        this.keyupEnter();
    },
    computed: {
        ...mapState({
            themeColor: state => state.app.themeColor
        })
    }
};
</script>

<style lang="scss" scoped>
/* 报错信息样式重置 */
/deep/.el-form-item.is-error {
    margin-bottom: 20px;
}

/* 输入框样式高度设置 */
.login-input /deep/ .el-input__inner {
    display: block;
    height: 40px !important;
    line-height: 40px !important;
}

.container {
    height: 100%;
    background: url("../assets/beijingtu02.jpg") no-repeat;
    background-position: center center;
    background-size: 100%;

    .one {
        overflow: hidden;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .login-container {
            background-clip: padding-box;
            width: 425px;
            padding: 35px 35px 15px 35px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
            margin: 0 auto;

            .web-title {
                margin: 0px auto 30px auto;
                text-align: center;
                color: #505458;
            }

            .remember {
                margin: 0px 0px 35px 0px;
            }

            .login-switchover-wrap {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background-color: #fff;
                color: #2F4554;
                position: relative;

                .switchover {
                    width: 50%;
                    float: left;
                    text-align: center;

                    a {
                        display: block;
                        text-decoration: none;
                        color: #2F4554;
                    }
                }
            }
        }

        .picSwiper {
            width: 380px;
            height: 361px;
            float: left;
            background-color: #fff;
            text-align: center;
            opacity: 0.7;

            img {
                margin-top: 20%;
            }
        }
    }
}
</style>
